@import "_function";
.listen_details1{
  .header{
    .pt(30);
    background: url("../../src/image/listenbook1-bg.jpg") no-repeat;
    .bgs(750,1095);
    .top {
      .h(88);
      .oh;
      i{
        .db();
        .fl();
        .w(23);
        .h(42);
        .ml(56);
        .mt(23);
        background: url("../../src/image/listenbook-back1.png") no-repeat;
        .bgs(23,42);
      }
      span{
        .db();
        .fr();
      }
      .share{
        .w(38);
        .h(38);
        background: url("../../src/image/listenbook-share.png") no-repeat;
        .bgs(38,38);
        .mr(59);
      }
      .like{
        .w(40);
        .h(36);
        background: url("../../src/image/listenbook-like.png") no-repeat;
        .bgs(40,36);
        .mr(40);
      }
    }
    .playbook{
      .w(702);
      margin: 0 auto;
      .pt(40);
      .tc;
      .c(#ffffff);
      img{
        .w(240);
        .h(320);
      }
      h2{
        .fs(32);
        .mt(72);
      }
      h3{
        .fs(28);
        .mt(30);
      }
      .icon{
        .pt(60);
        .oh;
        i{
          .db;
          .fl;
          .w(52);
          .h(52);
          .tc;
          .mr(120);
          .pb(72);
        }
        .manage{
          background: url("../../src/image/listenbook1-manage.png") no-repeat;
          .bgs(52,52);
          .ml(157);
        }
        .reply{
          .w(60);
          .h(54);
          background: url("../../src/image/listenbook1-reply.png") no-repeat;
          .bgs(60,54);
        }
        .list{
          .w(53);
          .h(50);
          background: url("../../src/image/listenbook1-list.png") no-repeat;
          .bgs(53,50);
        }
      }
      .progress-bar{
        .w(702);
        .h(50);
        .pr;
        .pt(11);
        span{
          .db;
          .w(560);
          .h(4);
          background: #ffffff;
          margin: 0 auto;
        }
        span:before{
          content: '';
          .db;
          .w(34);
          .h(24);
          background: url("../../src/image/listenbook1-advance.png") no-repeat;
          .bgs(34,24);
          .pa;
          .t(0);
          .l(0);
          .ml(17);
        }
        span:after{
          content: '';
          .db;
          .w(34);
          .h(24);
          background: url("../../src/image/listenbook1-retreat.png") no-repeat;
          .bgs(34,24);
          .pa;
          .t(0);
          .r(0);
          .mr(17);
        }
        b{
          .db;
          .pa;
          .l(71);
          .t(20);
        }
        i{
          .r(71);
          .db;
          .pa;
          .t(20);
        }
        em{
          .db;
          .pa;
          .w(140);
          .h(12);
          background: url("../../src/image/listenbook1-bar.png") no-repeat;
          .bgs(140,12);
          .t(6);
          .l(71);
        }
      }
    }
    .play{
      .mt(50);
      .oh;
      .pl(57);
      .fs(20);
      .pb(80);
      img{
        .w(54);
        .h(53);
        .mb(12);
      }
      div{
        .fl;
        .oh;
        .pr;
        .h(95);
      }
      span{
        .db;
        .fl;
        .w(32);
        .h(40);
      }
      .prov{
        background: url("../../src/image/listenbook1-advance1.png") no-repeat;
        .bgs(32,40);
        .ml(65);
        .mr(150);
        .mt(23);
      }
      .next{
        background: url("../../src/image/listenbook1-retreat1.png") no-repeat;
        .bgs(32,40);
        .mr(78);
        .ml(60);
        .mt(23);
      }
      .playb{
        .w(88);
        .h(88);
        background: url("../../src/image/listenbook1-play.png") no-repeat;
        .bgs(88,88);
        .pa;
        left: 50%;
        .ml(-48);
      }
      .pause{
        .w(88);
        .h(88);
        background: url("../../src/image/listenbook1-pause.png") no-repeat;
        .bgs(88,88);
        .pa;
        left: 50%;
        .ml(-48);
        .dn;
      }
    }
  }
  .review-area{
    .w(702);
    margin: 0 auto;
    .com-title{
      .oh();
      .fs(32);
      .c(#666666);
      h2{
        .ml(30);
        .fl();
        .mb(40);
      }
      span{
        .db();
        .fr();
        .mr(35);
        .c(#67bfff);
      }
      span:before{
        content: "";
        .db();
        .fl();
        .w(24);
        .h(22);
        .mr(6);
        .mt(7);
        background: url("../../src/image/listenbook-write.png") no-repeat;
        .bgs(24,22);
      }
    }
    .null{
      .tc;
      img{
        .w(160);
        .h(140);
      }
    }
  }
}